<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	template="template.xhtml">
	
	<ui:define name="head">
		<style type="text/css">
			.label {
				width:20%;
				padding:2px;
			}

			.value {
				width:60%;
				padding:2px;
			}
			
			.grid {
				width:100%;
			}
		</style>
	</ui:define>
	
  <ui:define name="content">
		
			<h:form>
					<p:panel header="Create Allotment">
					    <p:growl id="growl" sticky="true" showDetail="true"/>
					
						
								
						
							<p:tab id="driver" title="SELECT DRIVER">
			<p:panel id="panel" header="Driver Details">
			<p:messages id="msgs" showDetail="true"/> 
				<h:panelGrid columns="3">
					<h:outputText value="Driving License Num: " />
					<p:autoComplete value="#{createAllotment.allotmentDo.dlNo}" completeMethod="#{createAllotment.getDriverbyDLNo}">
					<p:ajax event="itemSelect" listener="#{createAllotment.setDriver}" update="panel" />  
					</p:autoComplete>
				</h:panelGrid>
			
			
			
			
				<!--<p:growl showDetail="true"/>
				-->
				<h:panelGrid columns="2" columnClasses="label,value" styleClass="grid">
					<h:outputLabel for="title" value="Driver DL NO:" />
					<h:outputText id="title" value="#{createAllotment.allotmentDo.driverDO.driverDlNo}"
					style="font-weight: bold;"></h:outputText>
					
					<h:outputLabel for="driverName" value="Driver Name:" />
					<h:outputText id="driverName" value="#{createAllotment.allotmentDo.driverDO.driverName}"
					style="font-weight: bold;"></h:outputText>
					
					<h:outputLabel for="driverMobileNo" value="Mobile No:" />
					<h:outputText id="driverMobileNo" value="#{createAllotment.allotmentDo.driverDO.driverMobileNo}"
					style="font-weight: bold;"></h:outputText>
					
					<h:outputLabel for="driverExpDate" value="DL EXPIRY DATE:" />
					<h:outputText id="driverDlExpDate" value="#{createAllotment.allotmentDo.driverDO.driverDlExpDate}"
					style="font-weight: bold;"></h:outputText>
					
				</h:panelGrid>
			</p:panel>
			
							</p:tab>
								
							<p:tab id="vechile" title="SELECT VECHILE">
								<p:panel id="panelVechile"  header="Vechile Details">
								<p:messages id="msgsVechile" showDetail="true"/> 
										<h:panelGrid columns="3">
											<h:outputText value="Vechile Reg No: " />
											<p:autoComplete value="#{createAllotment.allotmentDo.vechileNo}" completeMethod="#{createAllotment.getVehiclesByRegNum}">
											<p:ajax event="itemSelect" listener="#{createAllotment.setVechile}" update="panelVechile" />  
											</p:autoComplete>
										</h:panelGrid>

									<h:panelGrid columns="2" columnClasses="label,value" styleClass="grid">
										<h:outputLabel for="title" value="Vechile Reg No:" />
										<h:outputText  id="vehCharRegno" value="#{createAllotment.allotmentDo.vehicleDO.vehCharRegno}"
										style="font-weight: bold;"></h:outputText>
										
										<h:outputLabel for="vechileMake" value="Vehicle Make:" />
										<h:outputText  id="vehCharMake" value="#{createAllotment.allotmentDo.vehicleDO.vehCharMake}"
										style="font-weight: bold;"></h:outputText>
										
										<h:outputLabel for="vechileOwner" value="Vechile Owner:" />
										<h:outputText  id="vehCharOwner" value="#{createAllotment.allotmentDo.vehicleDO.vehCharOwner}"
										style="font-weight: bold;"></h:outputText>
										
										<h:outputLabel for="vechileInsExpDate" value="Vechile Insurance Exp Date:" />
										<h:outputText id="vehDateInsurexpiry" value="#{createAllotment.allotmentDo.vehicleDO.vehDateInsurexpiry}"
										style="font-weight: bold;"></h:outputText>
										
									</h:panelGrid>
								</p:panel>
							</p:tab>
								
							<p:tab id="contact" title="Contact">
								<p:panel header="Contact Information">
									
									<h:messages errorClass="error"/>
								
									<h:panelGrid columns="2" columnClasses="label, value">
										<h:outputText value="Email: *" />
										<p:inputText required="true" label="Email"
												value="#{userWizard.user.email}" />
										
										<h:outputText value="Phone: " />
										<p:inputText value="#{userWizard.user.phone}"/>
										
										<h:outputText value="Additional Info: " />
										<p:inputText value="#{userWizard.user.info}"/>
									</h:panelGrid>
								</p:panel>
							</p:tab>
								
							<p:tab id="confirm" title="Confirmation">
								<p:panel header="Confirmation">
								
									<h:panelGrid id="confirmation" columns="6">
										<h:outputText value="Firstname: " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.firstname}" />
										
										<h:outputText value="Lastname: " />
										<h:outputText  styleClass="outputLabel"
													value="#{userWizard.user.lastname}"/>
										
										<h:outputText value="Age: " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.age}" />>
										
										<h:outputText value="Street: " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.street}" />
										
										<h:outputText value="Postal Code: " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.postalCode}" />
										
										<h:outputText value="City: " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.city}" />
										
										<h:outputText value="Email: " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.email}" />
										
										<h:outputText value="Phone " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.phone}"/>
										
										<h:outputText value="Info: " />
										<h:outputText styleClass="outputLabel"
													value="#{userWizard.user.info}" />
										
										<h:outputText />
										<h:outputText />
									</h:panelGrid>
									
									<p:commandButton value="Submit" update="growl" 
												actionListener="#{userWizard.save}"/>
								
								</p:panel>
							</p:tab>
							
						
						</p:panel>
					</h:form>
                    
		
  </ui:define>
  
</ui:composition>